<template>

  <div class="app-container">

    <el-descriptions title="个人信息" :column="4">
      <el-descriptions-item label="姓">{{student.xing}}</el-descriptions-item>
      <el-descriptions-item label="名">{{student.ming}}</el-descriptions-item>
      <el-descriptions-item label="英文姓(Last name)">{{student.last_name}}</el-descriptions-item>
      <el-descriptions-item label="英文名(First name)">{{student.first_name}}</el-descriptions-item>
      <el-descriptions-item label="性别">{{student.gender==1?'男':'女'}}</el-descriptions-item>
      <el-descriptions-item label="出生日期">{{student.birthday}}</el-descriptions-item>
      <el-descriptions-item label="家长是否支持你调剂海外院校">
        <span v-if="student.family_is_support_adjust==1">是</span>
        <span v-if="student.family_is_support_adjust==2">否</span>
        <span v-if="student.family_is_support_adjust==3">未沟通</span>
      </el-descriptions-item>
      <el-descriptions-item label="通过复试学校">{{student.birthday}}</el-descriptions-item>
      <el-descriptions-item label="电话">{{student.phone}}</el-descriptions-item>
      <el-descriptions-item label="邮箱">{{student.email}}</el-descriptions-item>
      <el-descriptions-item label="微信">{{student.wx}}</el-descriptions-item>
      <el-descriptions-item label="QQ">{{student.qq}}</el-descriptions-item>
      <el-descriptions-item label="户籍所在地">{{student.prov_name+student.city_name}}</el-descriptions-item>
    </el-descriptions>

    <el-divider></el-divider>

    <el-descriptions title="学历背景" :column="4">
      <el-descriptions-item label="毕业学校">{{student.college_name}}</el-descriptions-item>
      <el-descriptions-item label="专业">{{student.major_name}}</el-descriptions-item>
      <el-descriptions-item label="入学年份">{{student.join_college_year}}</el-descriptions-item>
      <el-descriptions-item label="毕业年份">{{student.end_college_year}}</el-descriptions-item>
      <el-descriptions-item label="本科GPA">{{student.college_gpa}}</el-descriptions-item>
      <el-descriptions-item label="成绩单文件">
        <span @click="download" style="color: #4dd9d5;cursor: pointer">下载</span>
      </el-descriptions-item>
      <el-descriptions-item label="考研成绩">{{student.test_postgraduate_point}}</el-descriptions-item>
      <el-descriptions-item label="英语等级">{{student.english_level_name}}</el-descriptions-item>
      <el-descriptions-item label="调剂意向"></el-descriptions-item>
      <el-descriptions-item label="意向专业"></el-descriptions-item>
      <el-descriptions-item label="英语等级最高分">{{student.english_level_highest_point}}</el-descriptions-item>
    </el-descriptions>

    <el-divider></el-divider>

    <el-descriptions title="家庭信息" :column="4">
      <el-descriptions-item label="父亲姓名">{{student.father_name}}</el-descriptions-item>
      <el-descriptions-item label="电话">{{ student.father_phone }}</el-descriptions-item>
      <el-descriptions-item label="工作单位">{{ student.father_work }}</el-descriptions-item>
      <el-descriptions-item label="职务">{{student.father_job}}</el-descriptions-item>
      <el-descriptions-item label="母亲姓名">{{student.mather_name}}</el-descriptions-item>
      <el-descriptions-item label="电话">{{ student.mather_phone }}</el-descriptions-item>
      <el-descriptions-item label="工作单位">{{ student.mather_work }}</el-descriptions-item>
      <el-descriptions-item label="职务">{{student.mather_job}}</el-descriptions-item>
    </el-descriptions>
    <el-divider></el-divider>

    <el-descriptions title="社会实践" :column="1" :colon="false">
      <template v-if="experience.length>0" >
        <el-descriptions-item label="出国经历"/>
        <el-descriptions-item v-for="(item,index) in experience" >{{"国家："+item.country+" | 日期："+item.date+" | 原因："+item.reason}}</el-descriptions-item>
      </template>
      <template v-else>
        <el-descriptions-item label="出国经历">无</el-descriptions-item>
      </template>

      <template v-if="publicActivity.length>0" >
        <el-descriptions-item label="公益活动"/>
        <el-descriptions-item v-if="publicActivity.length>0" v-for="(item,index) in publicActivity" >{{"公益："+item.activity+" | 日期："+item.date+" | 原因："+item.reason}}</el-descriptions-item>
      </template>
      <template v-else>
        <el-descriptions-item label="公益活动">无</el-descriptions-item>
      </template>
    </el-descriptions>

    <el-divider></el-divider>

    <el-descriptions title="自荐信" :colon="false">
      <el-descriptions-item >
        <div>
          {{student.self_recommend}}
        </div>

      </el-descriptions-item>
    </el-descriptions>

  </div>


</template>

<script>

import { myGet, myPost } from '@/utils/myRequest'
import {exportXls} from "@/utils/myUtils";


const urlAdd = '/guard/student/add'
const urlDetail = '/guard/student/detail'
const urlDownload = '/guard/student/downloadPoint'
export default {

  data() {
    return {
      host:process.env.VUE_APP_HOST,
      nameCount:0,
      countries:[],
      imageUrl:'',
      student:[],
      experience:"",
      publicActivity:"",
    }
  },
  methods:{
    download(){
      const url =  this.host+urlDownload+"?id="+this.student.id


      //alert(url)
      exportXls(url);
    }

  },
  mounted() {
    const id = this.$route.params.id

    myGet(urlDetail,{id}).then(res=>{
      if(res.status){
        this.student = res.data.records[0]
        this.student.college_name = this.student.get_college.value
        console.log(this.student.abroad_experience)
        if(this.student.abroad_experience.length==0 ||
          this.student.abroad_experience == undefined ||
          this.student.abroad_experience == null ||
          this.student.abroad_experience == ''){
          this.experience = []
        }else{
          this.experience = JSON.parse(this.student.abroad_experience)
        }

        if(this.student.publicActivity.length==0 ||
          this.student.publicActivity == undefined ||
          this.student.publicActivity == null ||
          this.student.publicActivity == ''){
          this.publicActivity=[]
        }else{
          this.publicActivity = JSON.parse(this.student.public_activity)

        }


      }
    })

  }
}
</script>

<style >

.ql-editor{
  height:400px;
}
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
